<template>
    <Card>
        <!-- <Button @click="notifyMe()">Notify me!</Button> -->
        <JG-search :searchData="searchData" @on-input-search="askDatasearch" @on-change-search="askDatasearchs" @on-change-change="askDatas" >
            <template v-slot:Button>
                <Button
                    class="ivu-mr-8"
                    @click="clickaskData(item.value)"
                    :type="+params.extension_type===item.value?'primary':'default'"
                    v-for="item of condition.extension_type_list" :key="item.value">{{item.label}}</Button>
            </template>
        </JG-search>
        <Row type="flex" justify="space-between">
            <Col>
                <Row :gutter="8" class="ivu-mb-16">
                    <Col><Button  @click="clickmodal(1)"
                            v-hasC="{name: '-v1-site-index-create',flag: '/v1/site/index/create'}">添加站点</Button></Col>
                    <Col><Button  @click="clickmodal(3)" :disabled="disabled"
                            v-hasC="{name: '-v1-site-index-update',flag: '/v1/site/index/update'}">编辑站点</Button></Col>
                    <Col><Button  @click="clickmodal(2)" :disabled="disabled"
                            v-hasC="{name: '-v1-site-index-upload',flag: '/v1/site/index/upload'}">上传站点</Button></Col>
                    <Col><Button  @click="clickmodal(4)" :disabled="disabled"
                            v-hasC="{name: '-v1-site-index-edit-config',flag: '/v1/site/index/edit-config'}">站点配置</Button></Col>
                    <Col><Button  @click="clickmodal(5)" :disabled="disabled"
                            v-hasC="{name: '-v1-site-index-log-list',flag: '/v1/site/index/log-list'}">查看日志</Button></Col>
                    <Col><Button  @click="clickmodal(6)" :disabled="disabled"
                            v-hasC="{name: '-v1-site-index-upload-cron',flag: '/v1/site/index/upload-cron'}">定时更新</Button></Col>
                    <!-- <Col><Button  @click="clickmodal(7)" :disabled="disabled"
                            v-hasC="{name: '-v1-rbac-role-agency-create',flag: '/v1/rbac/role/agency-create'}">站点迁移</Button></Col> -->
                    <Col><Button :to="row.local_mysql_backend_url" target="_blank" v-hasC="{name: '-v1-site-index-sql',flag: '/v1/site/index/sql'}" :disabled="!row.local_mysql_backend_url||+row.db_type===4">数据库</Button></Col>
                    <Col><Button  :to="row.local_ftp_url" target="_blank" :disabled="!row.local_ftp_url" :class="row.local_ftp_url?'local':''" v-hasC="{name: '-v1-site-index-localftp',flag: '/v1/site/index/localftp'}"><b>本地FTP</b></Button></Col>
                    <Col><Button  :to="row.online_ftp_url" target="_blank" :disabled="!row.online_ftp_url" :class="row.online_ftp_url?'online':''" v-hasC="{name: '-v1-site-index-onlineftp',flag: '/v1/site/index/onlineftp'}"><b>线上FTP</b></Button></Col>
                    <Col><Button  @click="clickmodal(7)" :disabled="disabled" v-hasC="{name: '-v1-site-index-recreate-local-ftp',flag: '/v1/site/index/recreate-local-ftp'}">管理工具箱</Button></Col>
                    <!-- style="color:#0a82b7" -->
                    <!-- style="color:#f59a23" -->
                    <!-- <a :href="row.online_ftp_url" target="_blank" :disabled="!row.online_ftp_url" v-hasC="butshow.Online">线上FTP</a>
                    <Divider type="vertical" v-hasC="butshow.Online"/>
                    <a :href="row.local_ftp_url" target="_blank" :disabled="!row.local_ftp_url" v-hasC="butshow.OfflineFTP">本地FTP</a> -->
                </Row>
            </Col>
            <Col><Button  @click="clickmodal(8)" :disabled="disabled"
                v-hasC="{name: '-v1-site-index-delete',flag: '/v1/site/index/delete'}">删除站点</Button>
            </Col>
        </Row>
        <div class="clicktable">
            <JG-table
                :params="params"
                :data="data"
                :rows="row"
                :columns="columns"
                :highlightRow="true"
                :loading="loading"
                :total="total"
                :butshow="butshow"
                :disabledhover="true"
                @askData="askData"
                @on-row-click="rowclick"
                @sortchange="sortchange"
                @on-cell-click="cheageRow"
                @changeisfocus="changeisfocus"
                :maxHeight="600"
            ></JG-table>

        </div>
        <!-- <div style="text-align: center;margin-top: 10px;">
            <Page :current.sync="currentPage" :total="total" :page-size="pageSize" :page-size-opts="pageSizeArray" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changePageSize"/>
        </div> -->
        <addmodal ref="addmodal" @askData="askData" :condition="condition"/> <!-- 添加站点 -->
        <editmodal ref="editmodal" @askData="askData" :condition="condition"/> <!-- 修改站点 -->
        <uploadmodal ref="uploadmodal" @askData="askData" :condition="condition"/><!-- 上传站点 -->
        <!-- <setmodal ref="setmodal" @askData="askData" :condition="condition"/>  站点配置 -->
        <setsort ref="setsort" @askData="askData" :condition="condition"/> <!--站点配置 -->
        <!-- ref="seemodal" @askData="askData" :condition="condition"/> -->
        <logInfo ref="logInfo" @askData="askData" :condition="condition"/>
        <!-- 查看日志 -->
        <!-- <transfermodal ref="transfermodal" @askData="askData" :condition="condition"/> 站点迁移 -->
        <timing ref="timing" @askData="askData" :condition="condition"/> <!-- 定时更新 -->
        <delmodal ref="delmodal" @askData="askData" :condition="condition"/> <!-- 删除站点 -->
        <managetool ref="managetool" @askData="askData" :condition="condition"/> <!--管理工具-->
    </Card>
</template>
<script>
    import addmodal from './addmodal'
    import uploadmodal from './uploadmodal'
    import editmodal from './editmodal'
    import setmodal from './setmodal'
    import setsort from './setsort'
    import transfermodal from './transfermodal'
    import timing from './timing'
    import delmodal from './delmodal'
    import managetool from './managetool'
    // import seemodal from './seemodal.vue'
    import logInfo from './logInfo.vue'
    import { siteindexlist, statusCode, updateRemark, status } from '@api/httpsetting'
    import util from '@/libs/util';
    export default {
        components: { addmodal, uploadmodal, editmodal, setmodal, transfermodal, timing, delmodal, setsort, logInfo, managetool },
        name: 'httpsetting',
        data () {
            const currentProject = util.storage.get('webcurrProject')
            return {
                butshow: {
                    Reset: {
                        name: '-v1-rbac-member-change-password',
                        flag: '/v1/rbac/member/change-password'
                    },
                    Unbind: {
                        name: '-v1-rbac-member-update-member',
                        flag: '/v1/rbac/member/update-member'
                    },
                    ActionLog: {
                        name: '-34',
                        flag: '/'
                    }
                },
                modal: false,
                disabled: true,
                params: { domain: '', site_type: '', bind_ssl: '', db_type: '', is_focus: 0, attr_type:'', extension_type: '', column: '', order: '', page: 1, pageSize: 20 },
                paramsinitial: [1, 2, 3],
                searchData: {
                    left: [
                        { id: 1, key: 'Input', value: '', style: { width: '200px' }, clearable: true, placeholder: '请输入您要查询的域名', callback: 'search' },
                        { id: 6, key: 'Select', value: currentProject, class: 'curpor', style: { width: '140px' }, clearable: false, placeholder: '请选择项目', field: { label: 'name', value: 'value' }, childList: this.project, callback: 'change', show: { show: util.storage.get('is_super') === 1 } },
                        { id: 2, key: 'Select', value: '', style: { width: '140px' }, clearable: true, placeholder: '请选择站点类型', childList: [], callback: 'change' },
                        { id: 3, key: 'Select', value: '', style: { width: '140px' }, clearable: true, placeholder: '请选择传输协议', childList: [{ value: '0', label: 'http' }, { value: '1', label: 'https' }], callback: 'change' },
                        { id: 4, key: 'Select', value: '', style: { width: '140px' }, clearable: true, placeholder: '请选择推广类型', childList: [{ value: 3, label: '优化站' }, { value: 2, label: '审核站' }, { value: 1, label: '竞价站' }], callback: 'change' },
                        { id: 5, key: 'Select', value: '', clearable: true, placeholder: '请选择站点数据库类型', childList: [{ value: 1, label: '独立新建数据库' }, { value: 2, label: '共用数据库' }, { value: 3, label: '复用数据库' },{ value: 4, label: '无数据库' }], callback: 'change' },
                        { id: 8, key: 'Select', value: '', clearable: true, placeholder: '请选择筛选项', childList: [{ value: 1, label: '已配置遮罩' }, { value: 2, label: '未配置遮罩' }, { value: 3, label: '已配置301到其他域名' },{ value: 4, label: '未配置301到其他域名' }], callback: 'change' },
                        // { id: 5, key: 'slot', keys: 'Button' },
                        { id: 7, key: 'Checkbox', value: false, label: '特别关注', callback: 'change' }
                    ]
                },
                columns: [
                    {
                        title: '域名',
                        key: 'realmName',
                        slot: 'realmName',
                        // align: 'center',
                        minWidth: 230,
                        ellipsis: true,
                        tooltip: true,
                        sortable: 'custom',
                        // fixed: 'left'
                    },
                    {
                        title: '站点状态',
                        key: 'http_status',
                        width: 110,
                        sortable: true,
                        render: (h, params) => {
                            return h('div', {
                                         prop: {
                                             type: 'text',
                                             value: params.row.http_status
                                         },
                                         style: {
                                             color: params.row.http_status == '200' ? '#19be6b' : 'red'
                                         },
                                         on: {
                                             // that.getStatusCode(value)
                                         }
                                     },params.row.http_status == '200' ? '网站正常' : params.row.http_status == '403' ? '禁止访问' : params.row.http_status == '404' ? '页面未找到' : params.row.http_status == '500' ? '服务器内部错误' : params.row.http_status == '301' ? '重定向' : params.row.http_status == '302' ? '临时性重定向' : '')
                        }
                        //带totip的展示
                        // render: (h, params) => {
                        //     return h('div', {
                        //                  prop: {
                        //                      type: 'text',
                        //                      value: params.row.http_status
                        //                  },
                        //                  style: {
                        //                      color: params.row.http_status == '200' ? '#19be6b' : 'red'
                        //                  },
                        //                  on: {
                        //                      // that.getStatusCode(value)
                        //                  }
                        //              },
                        //              [
                        //                  h('Tooltip', {
                        //                      prop: {
                        //                          transfer: true,
                        //                          placement: 'right',
                        //                          content: params.row.http_status == '200' ? '网站正常' : params.row.http_status == '403' ? '禁止访问' : params.row.http_status == '404' ? '页面未找到' : params.row.http_status == '500' ? '服务器内部错误' : params.row.http_status == '301' ? '重定向' : params.row.http_status == '302' ? '临时性重定向' : ''
                        //                      }
                        //                  }, [
                        //                      h('div', {
                        //                          style: {
                        //                              display: 'inline-block',
                        //                              width: params.column._width * 0.85 + 'px',
                        //                              overflow: 'hidden',
                        //                              textOverflow: 'ellipsis',
                        //                              whiteSpace: 'nowrap'
                        //                          }
                        //                      }, params.row.http_status),
                        //                      h('span', {
                        //                          slot: 'content',
                        //                          style: { whiteSpace: 'normal', wordBreak: 'break-all' }
                        //                      }, params.row.http_status == '200' ? '网站正常' : params.row.http_status == '403' ? '禁止访问' : params.row.http_status == '404' ? '页面未找到' : params.row.http_status == '500' ? '服务器内部错误' : params.row.http_status == '301' ? '重定向' : params.row.http_status == '302' ? '临时性重定向' : '暂无')
                        //                  ])
                        //     ])
                        // }

                    },
                    {
                        title: '所属VPS',
                        key: 'public_ip',
                        minWidth: 150
                    },
                    {
                        title: '推广类型',
                        key: 'extension_type_str',
                        minWidth: 110,
                        sortable: 'custom'
                    },
                    {
                        title: '数据库类型',
                        minWidth: 125,
                        key:'db_type',
                        sortable: 'custom',
                        render:(h,params)=>h('span',params.row.db_type=="1"?'新建':params.row.db_type=="2"?'共用':params.row.db_type=="3"?'复用':'-')
                    },
                    {
                        title: 'SSL证书',
                        key: 'ssl_end_day',
                        align: 'center',
                        minWidth: 120,
                        sortable: 'custom',
                        render: (h, params) => {
                            return h('span', {
                                prop: {
                                    type: 'text',
                                    value: params.row.ssl_end_day
                                },
                                style: {
                                    color: '#19be6b'
                                }

                            }, params.row.ssl_end_day ? '剩余' + params.row.ssl_end_day + '天' : '-')
                        }
                    },
                    {
                        title: '特别关注',
                        slot: 'isfocus',
                        minWidth: 110,
                        sortable: 'custom'
                    },
                    {
                        title: '更新时间',
                        key: 'updated_at_str',
                        align: 'center',
                        minWidth: 170,
                        sortable: 'custom'
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                        minWidth: 260
                        // render: (h, params) => {
                        //     let that = this
                        //     if (params.row.$isEdit) {
                        //         return h('Input', {
                        //             prop: {
                        //                 type: 'text',
                        //                 value: params.row.remark
                        //             },
                        //             on: {
                        //                 'on-blur': event => {
                        //                     params.row.remark = event.target.value
                        //                     that.getremark(params.row)
                        //                     this.$set(params.row, '$isEdit', false)
                        //                 }
                        //             }
                        //         }, params.row.remark)
                        //     } else {
                        //         return h('span', params.row.remark)
                        //     }
                        // }

                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'httpSettingAction',
                        slot: 'httpSettingAction',
                        fixed: 'right',
                        width: 110 }
                ],
                condition: {},
                loading: false,
                total: 0,
                data: [],
                http_status_map: {},
                row: {},
                project: util.storage.get('project'),
                is_super: util.storage.get('is_super'),
                timer: null

            }
        },
        created () {
            // this.initial()
            // console.log(this.data)
        },
        mounted () {
            this.searchData.left.forEach((item) => {
                if (item.id === 6) {
                    item.childList = []
                    // this.project.forEach(it => {
                    //     it.name = '项目:' + it.name
                    // })
                    item.childList = this.project
                    // console.log(item.childList, 'childList')
                }
            })
            this.initial()
            // this.timer = setInterval(this.getStatusCode, 100000);
        },
        activated () {
            this.timer = setInterval(this.getStatusCode, 100000);
        },
        deactivated () {
            // 页面关闭（路由跳转）时清除定时器
            clearInterval(this.timer)
            this.timer = null
            },
        beforeDestroy () {
            // 清除定时器
            clearInterval(this.timer)
            this.timer = null
            let webcurrProject = util.storage.get('webcurrProject')
            // console.log(webcurrProject, 'webcurrProject')
            util.storage.set('currentProject', webcurrProject)
            // util.storage.get('currentProject')
        },
        methods: {
            initial () {
                this.askData()
            },
            sortchange (e) {
                switch (e.sort) {
                case 1: this.params.order = 'asc'; break;
                case 2: this.params.order = 'desc'; break;
                default: this.params.order = ''; break;
                }
                switch (e.key) {
                case 'realmName': this.params.column = 'domain'; break;
                case 'extension_type_str': this.params.column = 'extension_type'; break;
                case 'updated_at_str': this.params.column = 'upload_time'; break;
                case 'ssl_end_day': this.params.column = 'ssl_end_time'; break;
                case 'is_focus': this.params.column = 'is_focus'; break;
                case 'db_type': this.params.column = 'db_type'; break;
                default: break;
                }
                if (e.key !== 'http_status') {
                    this.askData()
                }
            },
            askDatas () {
                this.searchData.page = 1
                this.askData()
            },
            askData () {
                this.searchData.left.forEach((item) => {
                    if (item.id === 1) {
                        this.params.domain = ((item.value.replace(/(^\s*)|(\s*$)/g, '')).replace(/(^\http:\/\/*)|(\/*$)/g, '')).replace(/(^\https:\/\/*)|(\/*$)/g, '')
                    } else if (item.id === 2) {
                        this.params.site_type = item.value
                    } else if (item.id === 3) {
                        this.params.bind_ssl = item.value
                    } else if (item.id === 4) {
                        this.params.extension_type = item.value
                    } else if (item.id === 5) {
                        this.params.db_type = item.value
                    } else if (item.id === 6) {
                        this.params.project_id = item.value
                        util.storage.set('currentProject', item.value)
                    } else if (item.id === 7) {
                        this.params.is_focus = item.value ? 1 : 0
                    }else if(item.id===8){
                        this.params.attr_type = item.value?item.value:''
                    }
                });
                this.loading = true
                siteindexlist(this.params).then(res => {
                    this.total = res.total
                    this.data = res.list
                    this.http_status_map = res.condition.http_status_map
                    this.list = res.condition.site_type_list
                    this.extensiontypeList = res.condition.extension_type_list
                    this.loading = false
                    this.disabled = true
                    this.row = {}
                    if (JSON.stringify(this.condition) == '{}') {
                        this.condition = res.condition
                        this.searchData.left.forEach((item) => {
                            if (item.id === 2) {
                                item.childList = this.condition.site_type_list
                            }
                        });
                    }
                    // this.getStatusCode()
                }).catch(() => {
                    this.loading = false;
                });
            },
            clickaskData (value) {
                this.params.page = 1
                this.params.extension_type = value
                this.askData()
            },
            rowclick (e) {
                if (e.row) {
                    this.disabled = false
                    this.row = e.row
                } else {
                    this.disabled = true
                    this.row = {}
                }
            },
            //
            askDatasearch () {
                this.params.page = 1
                this.searchData.left.forEach((item) => {
                    if (item.id === 2) {
                        item.value = '';
                    } else if (item.id === 3) {
                        item.value = '';
                    }
                });
                this.params.extension_type = ''
                this.askData()
            },
            askDatasearchs () {
                this.searchData.left.forEach((item) => {
                    if (item.id === 1) {
                        item.value = ((item.value.replace(/(^\s*)|(\s*$)/g, '')).replace(/(^\http:\/\/*)|(\/*$)/g, '')).replace(/(^\https:\/\/*)|(\/*$)/g, '').split('/')[0]
                    }
                });
                this.askDatasearch()
            },
            clickmodal (num) {
                switch (num) {
                case 1: this.$refs.addmodal.initial(); break;
                case 2: this.$refs.uploadmodal.initial(this.row); break;
                case 3: this.$refs.editmodal.initial(this.row); break;
                // case 4: this.$refs.setmodal.initial(this.row); break;
                case 4: this.$refs.setsort.initial(this.row);  break;
                case 5: this.$refs.logInfo.initial(this.row); break;
                case 6: this.$refs.timing.initial(this.row); break;
                // case 7: this.$refs.transfermodal.initial(this.row); break;
                case 7: this.$refs.managetool.initial(this.row); break;
                case 8: this.$refs.delmodal.initial(this.row); break;
                }
            },
            // 获取站点状态
            getStatusCode () {
                let data = {
                    ids: ''
                };
                let ids = '';
                for (let i in this.data) {
                    ids += ids ? ',' + this.data[i].id : this.data[i].id;
                }
                data.ids = ids;
                statusCode(data).then(res => {
                    for (let i in res) {
                        let index = this.http_status_map[res[i].id];
                        this.data[index].http_status = res[i].http_status;
                    }
                    // this.$forceUpdate()
                })
            },
            // 更新备注
            getremark (item) {
                let params = {
                    id: item.id,
                    remark: item.remark
                }
                updateRemark(params).then(res => {
                    this.$Message.success('保存成功')
                    this.$set(item, '$isEdit', false)
                    this.askData()
                })
            },
            cheageRow (e) {
                // debugger
                this.$set(e.row, '$isEdit', true)
            },
            changeisfocus (row) {
                this.getfocus(row)
                // console.log(row, 'row')
            },
            // 特别关注请求
            getfocus (row) {
                let params = {
                    site_id: row.id,
                    status: row.is_focus === true ? 1 : 0
                }
                status(params).then(res => {
                    this.$Message.success('保存成功')
                    this.$set(row, '$isEdit', false)
                    this.askData()
                })
            }

        }
    }
</script>
<style lang="less" scope>
.clicktable .ivu-table-row-highlight td, .clicktable tr.ivu-table-row-highlight.ivu-table-row-hover td, .clicktable .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .clicktable .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td{
    background: #515a6e;
     color: #fff
}
.clicktable .ivu-table-stripe .ivu-table-body tr.ivu-table-row-hover td,.clicktable .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-hover td{
     background: #515a6e;
     color: #fff
}
.curpor{
    width: 200px;
    position: relative;
}
.curpor .ivu-select-selected-value{
    padding-left: 45px !important;
}
 .curpor .ivu-select-selected-value::before{
    content: '项目:';
    position: absolute;
    z-index: 1;
    top:0;
    left: 10px;
}
.local{
    color:#2D8cF0 !important
}
.online{
    color:#f59a23 !important
}
</style>
